<template>
	<view class="foot">
		<view v-if="true">
			<view class="foot-item" v-for="(item,index) in favlist" :key="index">
				<navigator :url="`/pages/proinfo/proinfo?id=${item.id}`" hover-class="none" class="foot-pro">
					<view class="foot-pro-l">
						<view class="jximgbox">
							<view class="jxstips">{{item.Class}}</view>
							<image class="jximg" :src="item.PicFiles" mode="aspectFit"></image>
						</view>
					</view>
					<view class="jxinfo">
						<view class="jxtitle">{{item.Titles}}</view>
						<view class="jxprice" v-if="isLogin">￥{{item.Price}}</view>
						<view class="jxlogin" v-else>￥认证后可见</view>
						<view class="jxtip">厂家直销</view>
						<view class="jxer">本产品非质量问题不退/换</view>
					</view>
				</navigator>
				<view class="foot-delete" @click="handleDel(item.id)">
					<view class="foot-delete-box">
						<uni-icons type="closeempty" color="#a0a0a0"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="foot-empty" v-else>
			<text>~还没有浏览记录~</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue"
	const favlist = ref([{
		id: 1,
		Class: "中药配方颗粒",
		Titles: '酒白芍配方颗粒酒白芍配方颗粒',
		PicFiles: "http://baihang.com.cn/Upload/image/2021090904LMFFG9.jpg",
		Price: 12.12,
	}])
	const handleDel = (id) => {
		console.log(id)
	}
</script>

<style lang="scss">
	page {
		background: #f3f3f3;
	}

	.foot {
		padding: 20rpx;

		&-item {
			margin-bottom: 20rpx;
			position: relative;

			&:last-child {
				margin-bottom: 0;
			}
		}

		&-delete {
			position: absolute;
			bottom: 0;
			right: 0;
			padding: 20rpx;

			&-box {
				border: 1px solid #a0a0a0;
				border-radius: 100px;
				padding: 0 15rpx;
			}
		}

		&-pro {
			display: flex;
			justify-content: space-between;

			&-l {
				width: 49%;
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				overflow: hidden;
				background: $cf;
			}

			.jxinfo {
				width: 51%;
				border: 1px solid #e7e7e7;
				border-radius: 10rpx;
				background: $cf;
				padding: 20rpx;
				box-sizing: border-box;
				margin-left: -1px;
			}
		}

		&-empty {
			height: 80vh;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 36rpx;
			color: #2f2f2f;
		}
	}
</style>